<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="616px"
      :title="model.text"
      wrapClassName="add-modal-container"
      @cancel="closeModal()"
    >
      <div v-loading="formLoading">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :hideRequiredMark="model.text == '查看' ? true : false"
        >
          <!-- 系统编码 (编辑页面时此字段不可编辑)-->
          <a-form-model-item
            ref="systemCode"
            label="系统编码"
            prop="systemCode"
          >
            <a-input
              v-model.trim="form.systemCode"
              placeholder="请输入系统编码"
              :disabled="model.id ? true : false"
              :maxLength="50"
            />
          </a-form-model-item>
          <!-- 系统名称 -->
          <a-form-model-item
            ref="systemName"
            label="系统名称"
            prop="systemName"
          >
            <a-input
              v-model.trim="form.systemName"
              placeholder="请输入系统名称"
              :disabled="model.text == '查看' ? true : false"
              :maxLength="50"
            />
          </a-form-model-item>
          <!-- 系统类型 -->
          <a-form-model-item
            ref="systemTypeValue"
            label="系统类型"
            prop="systemTypeValue"
          >
            <a-select
              v-model="form.systemTypeValue"
              placeholder="请选择系统类型"
              :loading="systemLoading"
              :disabled="model.text == '查看' ? true : false"
            >
              <a-select-option
                :value="item.dicValue"
                v-for="(item, index) in systemSource"
                :key="index"
              >
                {{ item.dicDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <!-- 系统描述 -->
          <a-form-model-item
            ref="systemDesc"
            label="系统描述"
            prop="systemDesc"
          >
            <a-input
              :maxLength="255"
              v-model="form.systemDesc"
              placeholder="请输入系统描述"
              :disabled="model.text == '查看' ? true : false"
              type="textarea"
              style="height: 100px"
            />
          </a-form-model-item>
        </a-form-model>
        <div class="form-footer flex">
          <a-button type="default" @click="closeModal()">取消 </a-button>
          <a-button
            type="primary"
            :loading="loading"
            @click="submit"
            v-if="model.text != '查看'"
          >
            提交
          </a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { notificationTip } from "@/utils";
import { getDictList } from "@/api/user-center/organizationManage.js";
import {
  getBusinessAdd,
  getBusinessDetails,
} from "@/api/user-center/businessManage.js";
export default {
  name: "addModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    model: {
      type: Object,
      default: {},
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getSystemList();
          if (this.model.id) {
            this.getDetail();
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      form: {
        //系统编码
        systemCode: "",
        //系统名称
        systemName: "",
        //系统类型
        systemTypeValue: undefined,
        //系统描述
        systemDesc: "",
      },
      formLoading: false,
      rules: {
        systemCode: [
          { required: true, message: "请输入系统编码", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9_-]+$/,
            message: "只能输入英文字母，数字，下划线，中划线",
          },
        ],
        systemName: [
          { required: true, message: "请输入系统名称", trigger: "blur" },
        ],
        systemTypeValue: [
          { required: true, message: "请选择系统类型", trigger: "change" },
        ],
      },
      //系统类型
      systemLoading: false,
      systemSource: [],
    };
  },
  mounted() {},
  methods: {
    //查询系统类型
    getSystemList() {
      this.systemLoading = true;
      getDictList({ dictKey: "sysType" })
        .then((res) => {
          let { data } = res;
          this.systemSource = data.result || [];
        })
        .catch((_) => {
          this.systemSource = [];
        })
        .finally((_) => {
          this.systemLoading = false;
        });
    },
    getDetail() {
      this.formLoading = true;
      let { id } = this.model;
      getBusinessDetails(id)
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.form = {
            //系统编码
            systemCode: result.systemCode,
            //系统名称
            systemName: result.systemName,
            //系统类型
            systemTypeValue: Number(result.systemTypeValue),
            //系统描述
            systemDesc: result.systemDesc,
          };
        })
        .catch((_) => {})
        .finally((_) => {
          this.formLoading = false;
        });
    },

    //提交
    submit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          let { form } = this;
          let { id } = this.model;
          let formJson = {
            //系统编码
            systemCode: form.systemCode,
            //系统名称
            systemName: form.systemName,
            //系统类型
            systemTypeValue: form.systemTypeValue,
            //固定sysType
            systemTypeKey: "sysType",
            //系统描述
            systemDesc: form.systemDesc,
          };
          if (id) {
            formJson.id = id;
          }
          getBusinessAdd(formJson)
            .then((res) => {
              let msg = "新增系统成功！";
              if (id) {
                msg = "编辑系统成功！";
              }
              notificationTip("success", msg);
              this.closeModal();
              this.$parent.getTableData();
            })
            .catch((_) => {})
            .finally((_) => {
              this.loading = false;
            });
        }
      });
    },

    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },

    //重置表单
    resetForm() {
      this.form = {
        //系统编码
        systemCode: "",
        //系统名称
        systemName: "",
        //系统类型
        systemTypeValue: undefined,
        //系统描述
        systemDesc: "",
      };
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 20px 60px;
    .ant-form-item {
      .flex();
      .ant-form-item-label {
        flex-shrink: 0;
        width: 80px;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }
    .form-footer {
      justify-content: center;
    }
  }
}
</style>
